<!-- 
  @name: 我的车辆
  @date: 2020.1.8
 -->
<template>
	<view class="content">
		<!-- 添加车牌 -->
		<view class="add" @tap="$navigateTo('./add')">
			<view class="icon"></view>
			<text class="text">添加车牌</text>
		</view>
		
		<!-- 有车牌号时 -->
		<view v-if="lists.length > 0">
			<view class="license">
				<uni-swipe-action>
					<uni-swipe-action-item
						v-for="(item, index) in lists"
						:options="options"
						:key="item.carId"
						@click="swipeClick(item, index)">
						<view class="lc-item">
							<view class="lc-item-1">
								<view class="img"></view>
								<view class="msg">
									<view>{{item.carNumber}}</view>
									<view class="t1">{{item.carOwner}}</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 没有车牌号时 -->
		<view class="no_lists" v-if="lists.length === 0">
			<view class="img"></view>
			<text class="tip">暂无车辆信息，点击上面添加吧</text>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="getList"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //车辆数组
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'rgba(255,153,0)'
					}
				}],  //滑动扩展菜单
			}
		},
		onLoad() {
			this.getList();
			uni.$on('userCar_addCar', this.getList);
		},
		onUnload() {
			uni.$off('userCar_addCar', this.getList);
		},
		onPullDownRefresh() {
			this.getList();
		},
		methods: {
			//点击滑动菜单(删除车辆)
			swipeClick(item, index) {
				uni.showModal({
				    content: '确定删除这个车辆？',
				    success: (rs) => {
				        if (rs.confirm) {
							this.$http({
								url: this.$api.userUrl + 'doeditusercar',
								data: {
									carId: item.carId,
									action: -1,
								}
							}).then(res => {
								this.$successToast('已删除');
								this.lists.splice(index, 1);
							});
				        }
				    }
				});
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.userUrl + 'getmycarlist',
					data: {
						isNavigate: 0
					},
					loading: 0
				}).then(res => {
					this.lists = [];
					this.lists = this.lists.concat(res);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 添加车牌 */
	.add {
		width: 750rpx;
		height: 106rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: content-box;
		background-color: $color-white;
		border-top: $spacing-col solid $color-bg;
		border-bottom: $spacing-col solid $color-bg;
		.icon {
			width: 39rpx; 
			height: 39rpx;  
			background-image: url(../static/wxImage/icon-add.png); 
		} 
		.text { 
			margin-left: 30rpx;  
			color: $color-primary;
		} 
	}
	 
	/* 有车牌号时 */
	.license {
		width: 750rpx;
		padding-left: 30rpx;
		background-color: $color-white;
		.lc-item {
			width: 100%;
			padding-right: 30rpx;
			.lc-item-1 {
				width: 100%;
				padding: 40rpx 0;
				border-bottom: 1rpx solid $color-list;
				display: flex;
				flex-direction: row;
				align-items: center;
				.img {
					width: 90rpx;
					height: 90rpx;
					background-image: url('../static/wxImage/icon-car.png');
				}
				.msg {
					flex: 1;
					padding-left: 28rpx;
					.t1 {
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	
	/* 没有车牌号时 */
	.no_lists .img {
		width: 585rpx;
		height: 308rpx;
		margin-top: 200rpx;
		background-image: url('../static/wxImage/bg-noCar.png');
	}
</style>
